<!DOCTYPE html>
<html>
<head>
<title>新增供货商</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="http://assets.lp.alibaba.com/s/lpsp/base-min.css" rel="stylesheet" type="text/css" />
  <link href="http://assets.lp.alibaba.com/s/lplib/lpassert/css/lp-page-min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="../assets/grid.css" />
<style>
	XMP{
		border:1px solid #ccc;
	}
</style>
</head>
<body>
 <div class="form-group form-group-top-split">
		<h3 class="form-group-title form-group-split">功能：</h3>
		<div class="form-line ks-clear">
			<ul>
				<li>1.	直接引入的模块 </li>
				<li>2.	异步加载数据，分页 </li>
				<li>3.	同步加载数据</li>
			</ul>
		</div>
</div>

<div class="form-group form-group-top-split">
	<h3 class="form-group-title form-group-split">引入的模块</h3>
	
	<div class="form-line ks-clear">

		<XMP> 
			//Grid 模块入口
			KISSY.use('gallery/grid/1.0/',function(S,Grid){
				
			});
		</XMP> 
		
	</div>

	<h3 class="form-group-title form-group-split">异步加载数据</h3>
	
	<div class="form-line ks-clear">
	 <div id="J_async_grid">
		<h4> DOM结构:</h4>
		<p>
		<XMP> 
			 <div id="J_async_grid">
		 </div>
		</XMP> 
		</p>
		
	</div>
	<div class="form-line ks-clear">
		<h4> JS配置:</h4>
			<XMP> 
				var store = new Grid.Store({
					url:'data.html',
					autoLoad:true
				}),
				config = {
					renderTo:'J_async_grid',
					columns:[
						{ title: '渠道名称',width: 150,sortable :true, dataIndex: 'name'},
						{ title: '渠道类型',width: 150, dataIndex: 'type'},
						{ title : '创建时间',width:100,dataIndex : 'time',renderer : S.LP.Format.dateRenderer},
						{ title: '销售方式',width: 150, dataIndex: 'sale'},
						{ title: '操作',width: 100, dataIndex: 'isDelete',renderer:function(value){
							return '<span class="grid-command btn-del">删除</span>';
						}}
					],
					loadMask:true,
					store:store,
					tbar:{buttons:[{id:'addchanel',text:'添加渠道',handler:function(){alert('异步添加');},css:'bar-btn-add'}]},
					bbar:{pageSize : 20}
				};

				var grid = new Grid.Grid(config);
			</XMP> 
		 </div>
	</div>

	<h3 class="form-group-title form-group-split">同步加载数据</h3>
	 
	<div class="form-line ks-clear">
	<div id="J_sync_grid">
		<h4> DOM结构:</h4>
		<p>
		<XMP> 
			 <div id="J_sync_grid">
		 </div>
		</XMP> 
		</p>
		
	</div>
	<div class="form-line ks-clear">
		<h4> JS配置:</h4>
			<XMP> 
				var store = new Grid.Store({
					autoLoad:false
				}),
				config = {
					renderTo:'J_sync_grid',
					columns:[
						{ title: '渠道名称',width: 150,sortable :true, dataIndex: 'name'},
						{ title: '渠道类型',width: 150, dataIndex: 'type',renderer:S.LP.Format.enumRenderer(typeEnum)},
						{ title : '创建时间',width:100,dataIndex : 'time',renderer : S.LP.Format.dateRenderer},
						{ title: '销售方式',width: 150, dataIndex: 'sale',renderer:S.LP.Format.multipleItemsRenderer(saleEnum)},
						{ title: '操作',width: 100, dataIndex: 'isDelete',renderer:function(value){
							return '<span class="grid-command btn-del">删除</span>';
						}}
					],
					store:store,
					checkable:true,
					tbar:{buttons:[{id:'addchanel',text:'添加渠道',handler:addChanel,css:'bar-btn-add'}]}
				};

				var grid = new Grid.Grid(config);
			</XMP> 
		 </div>
	</div>
 </div>

 
</div>

 <script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
	<script>
	    KISSY.config({
			packages:[{
				name:"gallery",
				tag:"201112081542",
				path:"../../../../",
				charset:'utf-8'
			}]
		});
		KISSY.use('gallery/grid/1.0/',function(S,Grid){

			var typeEnum = {"1":"高级","2":"普通","3":"初级"},//[{id:'',value:''},{}]
				saleEnum = {"1":"零售","2":"分销","3":"团购"},
				asyncStore = new Grid.Store({
					url:'data.html',
					autoLoad:true
				}),
				asyncConfig = {
					renderTo:'J_async_grid',
					columns:[
						{ title: '渠道名称',width: 150,sortable :true, dataIndex: 'name'},
						{ title: '渠道类型',width: 150, dataIndex: 'type',renderer:Grid.Util.Format.enumRenderer(typeEnum)},
						{ title : '创建时间',width:100,dataIndex : 'time',renderer : Grid.Util.Format.dateRenderer},
						{ title: '销售方式',width: 150, dataIndex: 'sale',renderer:Grid.Util.Format.multipleItemsRenderer(saleEnum)},
						{ title: '操作',width: 100, dataIndex: 'isDelete',renderer:function(value){
							return '<span class="grid-command btn-del">删除</span>';
						}}
					],
					loadMask:true,
					store:asyncStore,
					tbar:{buttons:[{id:'addchanel',text:'添加渠道',handler:function(){alert('异步添加');},css:'bar-btn-add'}]},
					bbar:{pageSize : 20}
				};

			var asyncGrid = new Grid.Grid(asyncConfig);

			asyncGrid.on('cellclick',function(event){

				var sender = S.one(event.domTarget);
				if(sender.hasClass('btn-del')){
					alert('异步删除');
					//store.load()会重新加载数据，刷新
				}
			});

			var 
				store = new Grid.Store({
					autoLoad:false
				}),
				records = [{id:1,name:'渠道1',type:"1",time : 1218276186951,sale:["1","2"]},{id:2,name:'渠道2',type:"1",time : 1322460376800,editable:true},{id:3,name:'渠道2',type:"2",time : 1322460376800}],
				config = {
					renderTo:'J_sync_grid',
					columns:[
						{ title: '渠道名称',width: 150,sortable :true, dataIndex: 'name'},
						{ title: '渠道类型',width: 150, dataIndex: 'type',renderer:Grid.Util.Format.enumRenderer(typeEnum)},
						{ title : '创建时间',width:100,dataIndex : 'time',renderer : Grid.Util.Format.dateRenderer},
						{ title: '销售方式',width: 150, dataIndex: 'sale',renderer:Grid.Util.Format.multipleItemsRenderer(saleEnum)},
						{ title: '操作',width: 100, dataIndex: 'isDelete',renderer:function(value){
							return '<span class="grid-command btn-del">删除</span>';
						}}
					],
					checkable:true,
					store:store,
					tbar:{buttons:[{id:'addchanel',text:'添加渠道',handler:addChanel,css:'bar-btn-add'}]}
				};

			var grid = new Grid.Grid(config);
			store.setResult(records);
			
			
			//删除
			grid.on('cellclick',function(event){

				var sender = S.one(event.domTarget);
				if(sender.hasClass('btn-del')){
					//grid.cancelEdit();
					delChanel(event.data);
				}
			});
			//添加渠道
			function addChanel(event){
				var record = {id : '',name : '',editable : true};
				store.add(record);
			}

			//删除渠道
			function delChanel(data){
			
				store.remove(data);
			}
			
		});
	</script>
</body>
</html>